<template>
  <div>
    <nav-header title="登录"></nav-header>

    <div class="top">
      <span class="inp">
        <input type="text" id="username" v-model="username" placeholder="请输入你的账号" />
      </span>
      <span class="inp inp01">
        <input
          :type="type"
          name=""
          id="password"
          v-model="password"
          placeholder="请输入你的密码"
        />
        <div class="eyes" @click="flag = !flag">
          <van-icon :name="elIcon" size="25px" />
        </div>
      </span>
      <div class="bt">
        <div class="login" @click="loGin()">登录</div>
      </div>
    </div>
    <div class="login">
      还没账号，先去<router-link class="p" to="/reg">注册</router-link>
    </div>
  </div>
</template>

<script>
import NavHeader from "../components/Nav-Header.vue";
export default {
  name: "App03LoGin",
  components: { NavHeader },
  data() {
    return {
      flag: false,
      username:'',
      password:''

    };
  },
  computed: {
    type() {
      return this.flag ? "text" : "password";
    },
    elIcon() {
      return this.flag ? "eye" : "closed-eye";
    },
  },
  mounted() {},

  methods: {
    loGin() {
      let username = this.username
      let password = this.password
      this.$axios
        .post("/user/login", {
          username,
          password,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.$toast("登录成功！");

            let { token, tokenExpired, uid, userInfo } = res;

            localStorage.setItem("xl-token", token);
            localStorage.setItem("xl-tokenExpired", tokenExpired);
            localStorage.setItem("xl-uid", uid);
            localStorage.setItem("xl-userInfo", JSON.stringify(userInfo));

            // 跳转到首页
            setTimeout(() => {
              this.$router.push("/home");
            }, 500);
          } else {
            this.$toast(res.msg || "登录失败！");
            this.$router.push('/reg')
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  width: 95%;
  margin: auto;
  .inp {
    display: block;
    height: 55px;
    width: 100%;
    // background-color: cyan;
    border-bottom: 1px solid rgb(206, 206, 206);
    input {
      font-size: 15px;
      line-height: 50px;
      color: rgb(68, 68, 68);
      //   margin-bottom: 10px;
    }
  }
  .inp01 {
    position: relative;
    display: flex;
    .eyes {
      position: absolute;
      right: 10px;
      top: 20px;
    }
  }
  .bt {
    width: 100%;
    text-align: center;
    margin-top: 300px;
    .login {
      width: 80%;
      height: 40px;
      background-color: #07c160;
      color: white;
      margin: auto;
      line-height: 40px;
      border-radius: 30px;
    }
    .reg {
      width: 80%;
      height: 40px;
      // background-color: cornflowerblue;
      color: #07c160;
      margin: auto;
      line-height: 40px;
      border-radius: 30px;
      margin-top: 10px;
    }
  }
}
.login{
  width: 100%;
  height: 40px;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  .p{
    color: #07c160;
  }
}
</style>